<!-- @format -->

<template>
  <form @submit.prevent="formSubmit">
    <!-- <SchemaForm :schema="schema" /> -->

    <!-- 正常的表单提交 -->
    <SchemaForm
      @submit="formSubmit"
      v-if="theSchemaType == THE_SCHEMA_TYPE.OBJECT"
      :schema="thePropsSchema"
      :validation-schema="validationSchema"
    >
    </SchemaForm>

    <!-- SchemaWizard可以分页的表单提交 -->
    <SchemaWizard
      v-else-if="theSchemaType == THE_SCHEMA_TYPE.ARRAY"
      :schema="thePropsSchema"
      :validation-schema="validationSchema"
      :step="theStep"
    />
    <div v-else>传递的 Schema 配置有误，请检查是否为对象或数组！</div>

    <template v-if="theSchemaType == THE_SCHEMA_TYPE.ARRAY">
      theStep的值为： --{{ theStep }}--
      <el-space>
        <el-button v-if="theStep > 0" @click="theStep--">Back</el-button>
        <el-button v-if="theStep < 1" @click="theStep++">Next</el-button>
      </el-space>
    </template>
    <br />
    <br />
    <el-space>
      <el-button type="primary" @click.prevent="onSubmit">提交</el-button>
      <el-button @click="onClear">清除</el-button>
    </el-space>
    <pre>{{ theSchemaValue }}</pre>
  </form>
</template>

<script setup lang="ts">
  import { onMounted, ref, useSlots, watch } from 'vue'
  import { SchemaForm, SchemaWizard, useSchemaForm } from 'formvuelate'
  import * as yup from 'yup'
  import {
    getSchemaType,
    THE_SCHEMA_TYPE,
    setComponentsDefaultCompSlot,
  } from '@/form-pro/utils/Index.ts'
  import { useForm } from '@/form-pro/hooks/form-pro'

  // 获取类型
  const theProps = defineProps({
    schema: {
      // type:   FormArraySchema[];,
      required: true,
    },
    schemaValue: {
      type: Object,
      default: () => ({}),
    },
    step: {
      type: Number,
      default: 0,
    },
  })

  // 数组 start
  const theStep = ref(theProps.step)
  // 数组 end
  const thePropsSchema: any = ref(theProps.schema)

  const theSchemaType = ref(getSchemaType(theProps.schema))

  const validationSchema = yup.object().shape({
    firstName: yup.string().email().required(),
  })
  const userData: any = ref({})
  const { theSchemaValue, getSchemaValue, setSchemaValue } = useForm()
  const { updateFormModel }: any = useSchemaForm(theSchemaValue)

  const theEmits = defineEmits(['submit', 'clear', 'refreshForm'])

  // value 变化的时候触发 start
  watch(
    theSchemaValue,
    async () => {
      // console.log(theProps.schema);

      await onInitFormData()
      // onInitSchemaForm()
      thePropsSchema.value = setComponentsDefaultCompSlot(
        theProps.schema,
        'noRefresh',
        theSchemaValue.value,
      )
      console.log('watch 监听 ===>', thePropsSchema.value)
    },
    {
      deep: true,
    },
  )
  // value 变化的时候触发 end

  // FormVueLate 循环子集初始化值  start
  // const theFormProSchema = ref()
  const onFormProSchema = () => {
    thePropsSchema.value = setComponentsDefaultCompSlot(
      theProps.schema,
      useSlots(),
      theSchemaValue.value,
    )
  }
  onFormProSchema()
  // FormVueLate 循环子集初始化值  end

  setSchemaValue({
    defaultName: '------defaultName------',
  })

  const onSubmit = () => {
    theEmits('submit', getSchemaValue())
  }
  const onClear = () => {
    userData.value = {}
  }

  // 初始化表单数据 start
  /**
   * 监听变化
   * @description 同步更改 SchemaForm 的值
   */
  const onInitFormData = () => {
    // userData.value =
    Object.keys(userData.value).forEach((key) => {
      updateFormModel(key, userData.value[key])
    })
  }

  /**
   * 监听变化
   * @description 剔除 ifShow 为 false 的组件
   */
  const onInitSchemaForm = () => {
    theEmits('refreshForm', getSchemaValue())
  }
  // 初始化表单数据 end

  const formSubmit = (val) => {
    console.log('getSchemaValue() ===>', getSchemaValue())
    console.log('formSubmval ===>', val)
  }

  onMounted(() => {
    onInitFormData()
  })
</script>
